<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <form id="info_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8" @submit.prevent="page(1)">
          <div class="form-group">
            <label class="font-noraml">创建时间</label>
            <div class="input-daterange input-group">
              <input autocomplete="off" type="text" placeholder="点击输入起始时间" class="input-sm form-control" name="dateBegin"/>
              <span class="input-group-addon">到</span>
              <input autocomplete="off" type="text" placeholder="点击输入截止时间" class="input-sm form-control" name="dateEnd"/>
            </div>
          </div>
          <div class="form-group">
            <input type="text" name="keyword" placeholder="请输入关键词" class="input-sm form-control">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-sm btn-primary">搜索</button>
            <button type="reset" class="btn btn-sm btn-dafault">重置</button>
          </div>
        </form>
        <a href="javascript:;" @click="exportXls()" x-if='staff.hasPermission("analysis:export:riverSupervisor")' class="btn btn-info m-t"><i class="fa fa-file-excel-o"></i> 导出数据</a>
        <div class="table-responsive table-scrollable">
          <table class="table table-bordered table-striped  table-hover">
            <thead>
            <tr>
              <th style="width:20px;">#</th>
              <th>行政区划</th>
              <th>省级河长</th>
              <th>市级河长</th>
              <th>县级河长</th>
              <th>乡镇级河长</th>
              <th>村级河长</th>
            </tr>
            </thead>
            <tbody>
            <tr v-if="result.data.data && result.data.data.length>0" v-for="(item, index) in result.data.data">
              <td>{{(result.data.pageIndex-1)*result.data.pageSize + index+1}}</td>
              <td>{{item.type}}</td>
              <td>{{item.type}}</td>
              <td>{{item.type}}</td>
              <td>{{item.type}}</td>
              <td>{{item.type}}</td>
              <td>{{item.type}}</td>
            </tr>
            <tr v-if="result.data.data==null || result.data.data.length==0">
              <td colspan="7">
                <div class="alert"><strong>{{ result | message }}</strong></div>
              </td>
            </tr>
            </tbody>
          </table>
          <div class="b_page" v-html="tagPages"></div>
        </div>
      </div>
    </div>
    <div class="col-md-12">
      <div class="echarts" id="echarts-bar-chart"></div>
    </div>
  </div>
</template>
<style>
  .echarts {
    height: 540px;
  }
</style>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/datepicker-vendor.js'
  import {axiosContentType, site} from '@/assets/js/boss'
  import '@/assets/js/pageTag'
  import echarts from 'echarts'
  import Swal from 'sweetalert2'

  export default {
    data() {
      return {
        result: {data: {pageIndex: 1, data: []}, message: ''},
        tagPages: ''
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      this.staff.init(function () {
        that.page(1);
      });
      $('.input-daterange').datepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        keyboardNavigation: !1,
        forceParse: !1,
        autoclose: !0
      });

      var barChart = echarts.init(document.getElementById('echarts-bar-chart'));
      var baroption = {
        title: {
          text: '某地区蒸发量和降水量'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['蒸发量', '降水量']
        },
        grid: {
          x: 30,
          x2: 40,
          y2: 24
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          },
          {
            name: '降水量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markPoint: {
              data: [
                {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18},
                {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          }
        ]
      };
      barChart.setOption(baroption);

      window.onresize = barChart.resize;
    },
    methods: {
      page(pageIndex) {
        let that = this;
        if (!pageIndex) pageIndex = 1;
        axios.post(site.orgInfo.page + pageIndex
          , $('#info_search_form').serialize()
          , axiosContentType.xWwwFormUrlencoded
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.result = result;
            that.tagPages = that.tag.page(result.data);
          } else {
            Swal.fire(result.message);
          }
        });
      },
      exportXls() {

      }
    }
  }
</script>
